import styled from 'styled-components';

export const LoginWrapper = styled.div`
    width:100vw;
    height:100vh;
    background:var(--defaultColor);
    display:flex;
    justify-content:center;
    align-items:center;
    .content{
        width:500px;
        height:500px;
        background:rgba(240,240,240,.9);
        border-radius:30px;
        box-shadow:3px 3px 10px #eee;
        padding:20px;
    };
    .logo{
        position: relative;
        margin-top:50px;
        font-size: 70px;
        line-height: 100%;
        text-align: center;
        color: var(--defaultColor);
        ::before {
            content: 'Reaper';
            position: absolute;
            color: transparent;
            /* background-image: linear-gradient(to right, #bfcb44, #eeaaa5, #585eaa, #ed1941, #7fb80e, #f26522, #ffc20e, #7c8577, #009ad6, #65c294, #f47920, #f15b6c); */
            background:#fff;
            background-clip: text;
            -webkit-background-clip: text;
            clip-path: polygon(-10% 0%, 0% 0%, 0% 150%,-10% 100%);
            animation: light 3s ease-in-out .5s infinite;
        }
        @keyframes light {
            0% {
                clip-path: polygon(-10% 0%, 0% 0%, 0% 120%,-10% 100%);
            }
            50% {
                clip-path: polygon(100% 0%, 110% 0%, 110% 100%,100% 100%);
            }
            100% {
                clip-path: polygon(-10% 0%, 0% 0%, 0% 120%,-10% 100%);
            }
        }
    };

    .form_content{
        margin-top:100px;
        padding:0 50px;
    }
    
    
`